<template>
  <a-row id="mr-system-sider">
    <a-layout-sider v-model="collapsed" :trigger="null" collapsible >
      <a-row class="logo" :style="{backgroundColor: $store.state.theme.color}">
        <img draggable="false" :src="logo" alt="logo" class="logo-svg">
      </a-row>
      <a-row>
        <mr-side-menu
          :collapsed="collapsed"
          :menu="menus"
          :theme="theme"
          @select="onSelect"
          :mode="mode" />
      </a-row>
    </a-layout-sider>
  </a-row>
</template>

<script>
// import { mapState } from 'vuex'
import MrSideMenu from '@/components/panel/MrSideMenu'
export default {
  name: 'MrSystemSider',
  components: { MrSideMenu },
  props: {
    mode: {
      type: String,
      required: false,
      default: 'inline'
    },
    theme: {
      type: String,
      required: false,
      default: 'dark'
    },
    collapsible: {
      type: Boolean,
      required: false,
      default: false
    },
    collapsed: {
      type: Boolean,
      required: false,
      default: false
    },
    logo: {
      type: String,
      required: true
    },
    menus: {
      type: Array,
      required: true
    }
  },
  methods: {
    onSelect (obj) {
      this.$emit('menuSelect', obj)
    }
  }
}
</script>

<style scoped lang="less">
 #mr-system-sider {
   .ant-layout-sider {
     background: rgba(255, 255, 255, 1);
     .logo {
       height: 60px;
       text-align: center;
       .title {
         text-align: center;
         width: 100%;
         font-size: 18px;
         color:  rgba(255, 255, 255, 1);
       }
     }
     .logo-svg {
       padding: 10px;
       height: 60px;
       line-height: 60px;
       box-shadow: none;
     }
     .main-memu {
       height: calc(100vh - 60px);
       overflow-y: auto;
       overflow-x: hidden;
     }
   }
 }
</style>
